<template>
  <div class="container">
    <Content :style="{ padding: '0 10px' }">
      <Card>
        <Form :model="formItem">
          <FormItem>
            <Row>
              <Col span="3">
                <Input v-model="formItem.username" size="large" />
              </Col>
              <Col span="2" align="center">
                <Button @click="empty">清空</Button>
              </Col>
              <Col span="1">
                <Button type="primary" @click="search">搜索</Button>
              </Col>
              <Col span="18" align="end">
                <Button type="success" @click="addformItem(1)"><Icon type="md-add" />新增用户</Button></Col
              >
            </Row>
          </FormItem>
        </Form>
        <el-alert :title="`数据一共 ${page.total}条`" type="info" show-icon> </el-alert>
        <Table :columns="columns" :data="list" :style="{ margin: '20px 0 ' }">
          <template slot="action" slot-scope="{ row }">
            <Button type="info" shape="circle" icon="ios-create-outline" ghost @click="addformItem(2, row)"></Button>
            <Button type="error" shape="circle" icon="ios-trash-outline" ghost @click="deleterows(row)" :style="{ margin: '0 0 0 20px' }"></Button>
          </template>
        </Table>
        <Page :total="page.total" show-elevator show-sizer align="end" :style="{ padding: '20px 0 0' }" @on-change="Changepage" />
      </Card>
    </Content>
    <!-- 新增弹出层 -->
    <Modal v-model="ismodal" :title="title" @on-ok="ok" @on-cancel="onchange" width="900px">
      <Form :model="discipline" :rules="ruleValidate" :label-width="130">
          <FormItem label="用户名" prop="username">
            <Input v-model="discipline.username" style="width: 500px; padding-bottom: 10px"></Input>
          </FormItem>
          <FormItem label="邮箱" prop="email">
            <Input v-model="discipline.email" style="width: 500px; padding-bottom: 10px"></Input>
          </FormItem>
          <FormItem label="密码" prop="password" v-show="title === '新增用户'">
            <Input v-model="discipline.password" style="width: 500px; padding-bottom: 10px"></Input>
          </FormItem>
          <FormItem label="性别" v-show="title === '新增用户'">
            <RadioGroup v-model="discipline.sex" style="width: 500px; padding-bottom: 10px">
              <Radio label="男"></Radio>
              <Radio label="女"></Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="角色">
            <Input v-model="discipline.role" style="width: 500px; padding-bottom: 10px"></Input>
          </FormItem>
          <FormItem label="权限组名称">
            <Select v-model="discipline.permission_group_id" style="width: 500px; padding-bottom: 10px">
              <Option v-for="item in disciplinelist" :key="item.id" :value="item.id">{{ item.username }}</Option>
            </Select>
          </FormItem>
          <FormItem label="联系电话">
            <Input v-model="discipline.phone" style="width: 500px; padding-bottom: 10px"></Input>
          </FormItem>
          <FormItem label="介绍">
            <Input v-model="discipline.introduction" type="textarea" placeholder="please input" style="width: 500px; padding-bottom: 10px" />
          </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { list, add, remove, update, simple } from '@/api/base/users'
export default {
  data () {
    return {
      ismodal: false,
      disciplinelist: [],
      formItem: {
        username: ''
      },
      ruleValidate: {
        username: [{ required: true, message: '不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      columns: [
        {
          title: '序号',
          key: 'id'
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '联系电话',
          key: 'phone'
        },
        {
          title: '用户名',
          key: 'username'
        },
        {
          title: '权限组名称',
          key: 'permission_group_title'
        },
        {
          title: '角色',
          key: 'role'
        },
        {
          title: '操作',
          slot: 'action',
          width: 260,
          align: 'center'
        }
      ],
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      discipline: {
        password: '',
        username: '',
        phone: '',
        permission_group_id: '',
        email: '',
        introduction: '',
        role: '',
        avatar: '',
        sex: '男'
      },
      list: [],
      title: ''
    }
  },
  created () {
    this.gitlist()
  },
  methods: {
    // 页面渲染
    async gitlist () {
      const { data } = await list(this.page)
      this.list = data.list
      this.page.total = data.counts
    },
    // 分页
    Changepage (newpage) {
      this.page.page = newpage
      this.gitlist()
    },
    // 清空
    empty () {
      this.formItem = {}
      this.gitlist()
    },
    // 搜索
    async search () {
      const obj = {}
      obj.username = this.formItem.username
      obj.page = this.page.page
      obj.pagesize = this.page.pagesize
      const { data } = await list(obj)
      this.list = data.list
      this.page.total = data.counts
    },
    // 添加 修改
    async addformItem (val, row) {
      this.ismodal = true
      const { data } = await simple()
      this.disciplinelist = data
      if (val === 1) {
        this.title = '新增用户'
      } else if (val === 2) {
        this.title = '修改用户'
        this.discipline = {
          username: row.username,
          phone: row.phone,
          permission_group_id: row.permission_group_id,
          email: row.email,
          introduction: row.introduction,
          role: row.role,
          avatar: row.avatar,
          id: row.id
        }
      }
    },
    // 确认添加
    async ok () {
      if (this.title === '新增用户') {
        console.log(this.discipline)
        await add(this.discipline).then(() => {
          this.$Message.success('添加成功')
          this.gitlist()
          this.discipline = {}
        })
      } else if (this.title === '修改用户') {
        await update(this.discipline).then(() => {
          this.$Message.success('修改成功')
          this.gitlist()
          this.discipline = {}
        })
        this.discipline = {}
      }
    },
    // 删除
    async deleterows (data) {
      await remove(data).then(() => {
        this.$Message.success('成功')
        this.gitlist()
      })
    },
    onchange () {
      this.ismodal = false
      this.discipline = {}
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
